<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>props</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入pro-types, 用于对组件传入props的标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel"> /* 此处一定要写babel */
    //1.创建组件
    class Person extends React.Component{

     render(){ 
        const {name,age,gender} =this.props
        //props 是只读的
        //this.props.name = 'jsck' TypeError: Cannot assign to read only property 'name' of object '#<Object>'
            return (<ul>
                <li>姓名:{name}</li>
                <li>性别:{gender}</li>
                <li>年龄:{age +1}</li>
                </ul>)
     }
     }
     //对组件标签传入的props数据类型限制
     Person.propTypes = {
        name:PropTypes.string.isRequired,//限制name必传且字符串类型,
        age:PropTypes.number,//限制age字段number类型 
        gender:PropTypes.string,//限制gender字符串类型 
        speak:PropTypes.func //限制speak字段 函数类型 func
     }
     //对组件传入props未传入的属性进行默认值设置
     Person.defaultProps={
        gender:"未知",
        age:18
     }
    //2.渲染虚拟DOM到页面
    ReactDOM.render(<Person name="tom"  gender="男" speak={speak} />,document.getElementById('test1'))
    ReactDOM.render(<Person name="jerry" age={19}  />,document.getElementById('test2'))
    const p = {
        name:"老刘",
        age:18,
        gender:"男"
    }
    
    ReactDOM.render(<Person {...p} />,document.getElementById('test3'))
    function speak(){
        console.log("你好")
    }
    </script>
</body>

</html>